<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <div>
      <template v-if="show">
        我是if为true看到的
        <a href="#">haha</a>
        <span>iwen</span>
      </template>
      <template v-else>
        我是if为false看到的
        <span>hhhhhhh</span>
      </template>
    </div>
    <div>
        <ul>
          <li v-for="(name,index) in names" v-bind:key="index"> {{name}}</li>
        </ul>
        <ul>
          <li v-for="(item,index) in user" v-bind:key="index">
            {{item.name}}
            {{item.age}}
          </li>
        </ul>
    </div>
    <button v-on:click="number+=1">按钮</button>
    <p>{{number}}</p>
    <button v-on:click="handleClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      number:1,
      msg: 'Welcome to Your Vue.js App zy',
      show:true,
      names:["dd","ee","54"],
      user:[
        {
          id:0,
          name:"56",
          age:25
        },
        {
          id:1,
          name:"fg",
          age:56
        }
        ,
        {
          id:2,
          name:"yyy",
          age:12
        }
      ]
    }
  },
  methods:{
    handleClick(){
      console.log(this);
      //this 来索引当前data中的数据
      this.show = !this.show
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
